<script setup>

import NowCarbonDioxideConcentration from "@/components/NowCarbonDioxideConcentration.vue";
import NowSoilConductivity from "@/components/NowSoilConductivity.vue";
import NowSoilNPK from "@/components/NowSoilNPK.vue";
import NowSoilTemperature from "@/components/NowSoilTemperature.vue";
import NowSoilMoistureContent from "@/components/NowSoilMoistureContent.vue";
import NowAirRelativeHumidity from "@/components/NowAirRelativeHumidity.vue";
import NowIlluminance from "@/components/NowIlluminance.vue";
import NowAirTemperature from "@/components/NowAirTemperature.vue";
import NowSoilPH from "@/components/NowSoilPH.vue";
import {VueDraggable} from "vue-draggable-plus";
</script>

<template>
  <div
      style="height: 88vh; width: 100vw;"
  >
    <vue-draggable :cols="4"
                   style="height: 88vh; width: 100vw;
            background-color: #85FFBD;
background-image: linear-gradient(249deg, #85FFBD 0%, #FFFB7D 100%);

            position: relative;"
    >
      <div class="svgTest" style="position: fixed; bottom: 4vh; left: 0; z-index: 0; pointer-events: none;">
        <img src="./assets/svg.png" alt="" style="width: 100%; height: 100%;object-fit: cover">
      </div>

      <div
          class="nowCard"
          style="padding: 0.3vw;width: 14vw;z-index: 3"
      >
        <now-illuminance style="position: absolute"></now-illuminance>
        <now-carbon-dioxide-concentration style="position: absolute;top: 40%;"></now-carbon-dioxide-concentration>
        <svg style="position: absolute;top: 10vw" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="none" viewBox="0 0 200 200" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"><path fill="url(&quot;#SvgjsLinearGradient2140&quot;)" fill-rule="evenodd" d="M200 150c0-55.228-44.772-100-100-100S0 94.772 0 150h200Z" clip-rule="evenodd"></path><defs><linearGradient gradientTransform="rotate(90 0.5 0.5)" id="SvgjsLinearGradient2140"><stop stop-opacity=" 1" stop-color="rgba(243, 235, 168)" offset="0"></stop><stop stop-opacity=" 1" stop-color="rgba(241, 149, 63)" offset="0.5852081298828125"></stop><stop stop-opacity=" 1" stop-color="rgba(221, 79, 79)" offset="1"></stop></linearGradient></defs></svg>
      </div>


    </vue-draggable>
  </div>

</template>

<style scoped>

</style>